<template>
  <el-page-header @click="this.$router.go(-1)" :icon="this.ArrowLeft" content="详情页面" title="返回" style="margin: 15px 0"/>
  <el-container>
    <el-header>
      <router-link :to="{path: '/note/editor', query:{id: this.noteId}}"><el-button type="success" style="float: left; margin-left: 100px"
      v-show="permissions.find(value => { return value.name === 'note:update'})">编辑</el-button></router-link>
      <el-button type="danger" style="float: left; margin-left: 100px" @click="this.deleteDialogVisible = true"
      v-show="permissions.find(value => { return value.name === 'note:delete'})">删除</el-button>
    </el-header>
    <el-main>
      <el-card style="text-align: left; width: 990px; margin: 35px auto 0 auto">
        <div>
          <span style="font-size: 20px"><strong>{{ note.title }}</strong></span>
          <el-divider content-position="left">{{ note.createDate }}</el-divider>
          <div class="markdown-body">
            <div v-html="note.contentHtml"></div>
          </div>
        </div>
      </el-card>
    </el-main>
  </el-container>
  <el-dialog v-model="deleteDialogVisible" title="警告" width="30%" center>
    <span>
      删除后无法找回笔记，是否确定删除？
    </span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="deleteDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="deleteNote"
        >确定</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script>
import 'github-markdown-css'
import { ArrowLeft } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

export default {
  name: "NoteDetails",
  data() {
    return {
      noteId: this.$route.query.id,
      note: {},
      ArrowLeft,
      deleteDialogVisible: false,
      permissions:[]
    }
  },
  mounted() {
    this.loadNote()
    this.loadPermissions()
  },
  methods: {
    loadNote() {
      let _this = this
      this.$axios.get("note/findById", {params: {id: this.noteId}})
      .then(success => {
        if (success.data.code === 200) {
          _this.note = success.data.data
        } else {
          alert(success.data.message)
        }
      }).catch(fail => {
        console.log(fail);
      })
    },
    loadPermissions() {
      let _this = this
      this.$axios.get("permissions")
          .then(success => {
            if (success.data.code === 200) {
              _this.permissions = success.data.data
            } else {
              alert(success.data.message)
            }
          }).catch(fail => {
        console.log(fail);
      })
    },
    deleteNote() {
      let _this = this
      this.$axios.get("note/delete", {params: {id: this.noteId}})
      .then(success => {
        if (success.data.code === 200) {
          ElMessage({
            message: _this.note.title + ' 被删除了',
            type: 'success',
          })
          _this.deleteDialogVisible = false
          _this.$router.go(-1)
        } else {
          ElMessage({
            message: success.data.message,
            type: 'error',
          })
          _this.deleteDialogVisible = false
        }
      }).catch(fail => {
        console.log(fail);
      })
    }
  }
}
</script>

<style scoped>

</style>